<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />

	<title>Centaurus - Bootstrap Admin Template</title>
	
	<!-- bootstrap -->
	<link rel="stylesheet" type="text/css" href="css/bootstrap/bootstrap.min.css" />
	
	<!-- RTL support - for demo only -->
	<script src="js/demo-rtl.js"></script>
	<!-- 
	If you need RTL support just include here RTL CSS file <link rel="stylesheet" type="text/css" href="css/libs/bootstrap-rtl.min.css" />
	And add "rtl" class to <body> element - e.g. <body class="rtl"> 
	-->
	
	<!-- libraries -->
	<link rel="stylesheet" type="text/css" href="css/libs/font-awesome.css" />
	<link rel="stylesheet" type="text/css" href="css/libs/nanoscroller.css" />

	<!-- global styles -->
	<link rel="stylesheet" type="text/css" href="css/compiled/theme_styles.css" />

	<!-- this page specific styles -->
	
	<!-- Favicon -->
	<link type="image/x-icon" href="favicon.png" rel="shortcut icon"/>

	<!-- google font libraries -->
	<link href='//fonts.googleapis.com/css?family=Open+Sans:400,600,700,300|Titillium+Web:200,300,400' rel='stylesheet' type='text/css'>

	<!--[if lt IE 9]>
		<script src="js/html5shiv.js"></script>
		<script src="js/respond.min.js"></script>
	<![endif]-->
</head>
<body class="fixed-header fixed-leftmenu">
	<div id="theme-wrapper">
		<header class="navbar" id="header-navbar">
			<div class="container">
				<a href="index.html" id="logo" class="navbar-brand">
					<img src="img/logo.png" alt="" class="normal-logo logo-white"/>
					<img src="img/logo-black.png" alt="" class="normal-logo logo-black"/>
					<img src="img/logo-small.png" alt="" class="small-logo hidden-xs hidden-sm hidden"/>
				</a>
				
				<div class="clearfix">
					<button class="navbar-toggle" data-target=".navbar-ex1-collapse" data-toggle="collapse" type="button">
						<span class="sr-only">Toggle navigation</span>
						<span class="fa fa-bars"></span>
					</button>
					
					<div class="nav-no-collapse navbar-left pull-left hidden-sm hidden-xs">
						<ul class="nav navbar-nav pull-left">
							<li>
								<a class="btn" id="make-small-nav">
									<i class="fa fa-bars"></i>
								</a>
							</li>
						</ul>
					</div>
					
					<div class="nav-no-collapse pull-right" id="header-nav">
						<ul class="nav navbar-nav pull-right">
							<li class="mobile-search">
								<a class="btn">
									<i class="fa fa-search"></i>
								</a>
								
								<div class="drowdown-search">
									<form role="search">
										<div class="form-group">
											<input type="text" class="form-control" placeholder="Search...">
											<i class="fa fa-search nav-search-icon"></i>
										</div>
									</form>
								</div>
								
							</li>
							<li class="dropdown hidden-xs">
								<a class="btn dropdown-toggle" data-toggle="dropdown">
									<i class="fa fa-warning"></i>
									<span class="count">8</span>
								</a>
								<ul class="dropdown-menu notifications-list">
									<li class="pointer">
										<div class="pointer-inner">
											<div class="arrow"></div>
										</div>
									</li>
									<li class="item-header">You have 6 new notifications</li>
									<li class="item">
										<a href="#">
											<i class="fa fa-comment"></i>
											<span class="content">New comment on ‘Awesome P...</span>
											<span class="time"><i class="fa fa-clock-o"></i>13 min.</span>
										</a>
									</li>
									<li class="item">
										<a href="#">
											<i class="fa fa-plus"></i>
											<span class="content">New user registration</span>
											<span class="time"><i class="fa fa-clock-o"></i>13 min.</span>
										</a>
									</li>
									<li class="item">
										<a href="#">
											<i class="fa fa-envelope"></i>
											<span class="content">New Message from George</span>
											<span class="time"><i class="fa fa-clock-o"></i>13 min.</span>
										</a>
									</li>
									<li class="item">
										<a href="#">
											<i class="fa fa-shopping-cart"></i>
											<span class="content">New purchase</span>
											<span class="time"><i class="fa fa-clock-o"></i>13 min.</span>
										</a>
									</li>
									<li class="item">
										<a href="#">
											<i class="fa fa-eye"></i>
											<span class="content">New order</span>
											<span class="time"><i class="fa fa-clock-o"></i>13 min.</span>
										</a>
									</li>
									<li class="item-footer">
										<a href="#">
											View all notifications
										</a>
									</li>
								</ul>
							</li>
							<li class="dropdown hidden-xs">
								<a class="btn dropdown-toggle" data-toggle="dropdown">
									<i class="fa fa-envelope-o"></i>
									<span class="count">16</span>
								</a>
								<ul class="dropdown-menu notifications-list messages-list">
									<li class="pointer">
										<div class="pointer-inner">
											<div class="arrow"></div>
										</div>
									</li>
									<li class="item first-item">
										<a href="#">
											<img src="img/samples/messages-photo-1.png" alt=""/>
											<span class="content">
												<span class="content-headline">
													George Clooney
												</span>
												<span class="content-text">
													Look, just because I don't be givin' no man a foot massage don't make it 
													right for Marsellus to throw...
												</span>
											</span>
											<span class="time"><i class="fa fa-clock-o"></i>13 min.</span>
										</a>
									</li>
									<li class="item">
										<a href="#">
											<img src="img/samples/messages-photo-2.png" alt=""/>
											<span class="content">
												<span class="content-headline">
													Emma Watson
												</span>
												<span class="content-text">
													Look, just because I don't be givin' no man a foot massage don't make it 
													right for Marsellus to throw...
												</span>
											</span>
											<span class="time"><i class="fa fa-clock-o"></i>13 min.</span>
										</a>
									</li>
									<li class="item">
										<a href="#">
											<img src="img/samples/messages-photo-3.png" alt=""/>
											<span class="content">
												<span class="content-headline">
													Robert Downey Jr.
												</span>
												<span class="content-text">
													Look, just because I don't be givin' no man a foot massage don't make it 
													right for Marsellus to throw...
												</span>
											</span>
											<span class="time"><i class="fa fa-clock-o"></i>13 min.</span>
										</a>
									</li>
									<li class="item-footer">
										<a href="#">
											View all messages
										</a>
									</li>
								</ul>
							</li>
							<li class="hidden-xs">
								<a class="btn">
									<i class="fa fa-cog"></i>
								</a>
							</li>
							<li class="dropdown profile-dropdown">
								<a href="#" class="dropdown-toggle" data-toggle="dropdown">
									<img src="img/samples/scarlet-159.png" alt=""/>
									<span class="hidden-xs">Scarlett Johansson</span> <b class="caret"></b>
								</a>
								<ul class="dropdown-menu">
									<li><a href="user-profile.html"><i class="fa fa-user"></i>Profile</a></li>
									<li><a href="#"><i class="fa fa-cog"></i>Settings</a></li>
									<li><a href="#"><i class="fa fa-envelope-o"></i>Messages</a></li>
									<li><a href="#"><i class="fa fa-power-off"></i>Logout</a></li>
								</ul>
							</li>
							<li class="hidden-xxs">
								<a class="btn">
									<i class="fa fa-power-off"></i>
								</a>
							</li>
						</ul>
					</div>
				</div>
			</div>
		</header>
		<div id="page-wrapper" class="container nav-small">
			<div class="row">
				<div id="nav-col">
					<section id="col-left" class="col-left-nano">
						<div id="col-left-inner" class="col-left-nano-content">
							<div id="user-left-box" class="clearfix hidden-sm hidden-xs">
								<img alt="" src="img/samples/scarlet-159.png" />
								<div class="user-box">
									<span class="name">
										Welcome<br/>
										Scarlett
									</span>
									<span class="status">
										<i class="fa fa-circle"></i> Online
									</span>
								</div>
							</div>
							<div class="collapse navbar-collapse navbar-ex1-collapse" id="sidebar-nav">	
								<ul class="nav nav-pills nav-stacked">
									<li>
										<a href="index.html">
											<i class="fa fa-dashboard"></i>
											<span>Dashboard</span>
											<span class="label label-info label-circle pull-right">28</span>
										</a>
									</li>
									<li>
										<a href="#" class="dropdown-toggle">
											<i class="fa fa-table"></i>
											<span>Tables</span>
											<i class="fa fa-chevron-circle-right drop-icon"></i>
										</a>
										<ul class="submenu">
											<li>
												<a href="tables.html">
													Simple
												</a>
											</li>
											<li>
												<a href="tables-advanced.html">
													Advanced
												</a>
											</li>
											<li>
												<a href="users.html">
													Users
												</a>
											</li>
										</ul>
									</li>
									<li class="open active">
										<a href="#" class="dropdown-toggle">
											<i class="fa fa-envelope"></i>
											<span>Email</span>
											<i class="fa fa-chevron-circle-right drop-icon"></i>
										</a>
										<ul class="submenu">
											<li>
												<a href="email-inbox.html">
													Inbox
												</a>
											</li>
											<li>
												<a href="email-detail.html" class="active">
													Detail
												</a>
											</li>
											<li>
												<a href="email-compose.html">
													Compose
												</a>
											</li>
										</ul>
									</li>
									<li>
										<a href="#" class="dropdown-toggle">
											<i class="fa fa-bar-chart-o"></i>
											<span>Graphs</span>
											<i class="fa fa-chevron-circle-right drop-icon"></i>
										</a>
										<ul class="submenu">
											<li>
												<a href="graphs-morris.html">
													Morris &amp; Mixed
												</a>
											</li>
											<li>
												<a href="graphs-flot.html">
													Flot
												</a>
											</li>
											<li>
												<a href="graphs-dygraphs.html">
													Dygraphs
												</a>
											</li>
											<li>
												<a href="graphs-xcharts.html">
													xCharts
												</a>
											</li>
										</ul>
									</li>
									<li>
										<a href="widgets.html">
											<i class="fa fa-th-large"></i>
											<span>Widgets</span>
											<span class="label label-success pull-right">New</span>
										</a>
									</li>
									<li>
										<a href="#" class="dropdown-toggle">
											<i class="fa fa-desktop"></i>
											<span>Pages</span>
											<i class="fa fa-chevron-circle-right drop-icon"></i>
										</a>
										<ul class="submenu">
											<li>
												<a href="calendar.html">
													Calendar
												</a>
											</li>
											<li>
												<a href="gallery.html">
													Gallery
												</a>
											</li>
											<li>
												<a href="gallery-v2.html">
													Gallery v2
												</a>
											</li>
											<li>
												<a href="pricing.html">
													Pricing
												</a>
											</li>
											<li>
												<a href="projects.html">
													Projects
												</a>
											</li>
											<li>
												<a href="team-members.html">
													Team Members
												</a>
											</li>
											<li>
												<a href="timeline.html">
													Timeline
												</a>
											</li>
											<li>
												<a href="timeline-grid.html">
													Timeline Grid
												</a>
											</li>
											<li>
												<a href="user-profile.html">
													User Profile
												</a>
											</li>
											<li>
												<a href="search.html">
													Search Results
												</a>
											</li>
											<li>
												<a href="invoice.html">
													Invoice
												</a>
											</li>
											<li>
												<a href="intro.html">
													Tour Layout
												</a>
											</li>
										</ul>
									</li>
									<li>
										<a href="#" class="dropdown-toggle">
											<i class="fa fa-edit"></i>
											<span>Forms</span>
											<i class="fa fa-chevron-circle-right drop-icon"></i>
										</a>
										<ul class="submenu">
											<li>
												<a href="form-elements.html">
													Elements
												</a>
											</li>
											<li>
												<a href="x-editable.html">
													X-Editable
												</a>
											</li>
											<li>
												<a href="form-wizard.html">
													Wizard
												</a>
											</li>
											<li>
												<a href="form-wizard-popup.html">
													Wizard popup
												</a>
											</li>
											<li>
												<a href="form-wysiwyg.html">
													WYSIWYG
												</a>
											</li>
											<li>
												<a href="form-summernote.html">
													WYSIWYG Summernote
												</a>
											</li>
											<li>
												<a href="form-ckeditor.html">
													WYSIWYG CKEditor
												</a>
											</li>
											<li>
												<a href="form-dropzone.html">
													Multiple File Upload
												</a>
											</li>
										</ul>
									</li>
									<li>
										<a href="#" class="dropdown-toggle">
											<i class="fa fa-desktop"></i>
											<span>UI Kit</span>
											<i class="fa fa-chevron-circle-right drop-icon"></i>
										</a>
										<ul class="submenu">
											<li>
												<a href="ui-elements.html">
													Elements
												</a>
											</li>
											<li>
												<a href="notifications.html">
													Notifications &amp; Alerts
												</a>
											</li>
											<li>
												<a href="modals.html">
													Modals
												</a>
											</li>
											<li>
												<a href="video.html">
													Video
												</a>
											</li>
											<li>
												<a href="#" class="dropdown-toggle">
													Icons
													<i class="fa fa-chevron-circle-right drop-icon"></i>
												</a>
												<ul class="submenu">
													<li>
														<a href="icons-awesome.html">
															Awesome Icons
														</a>
													</li>
													<li>
														<a href="icons-halflings.html">
															Halflings Icons
														</a>
													</li>
												</ul>
											</li>
											<li>
												<a href="ui-nestable.html">
													Nestable List
												</a>
											</li>
											<li>
												<a href="typography.html">
													Typography
												</a>
											</li>
											<li>
												<a href="#" class="dropdown-toggle">
													3 Level Menu
													<i class="fa fa-chevron-circle-right drop-icon"></i>
												</a>
												<ul class="submenu">
													<li>
														<a href="#">
															3rd Level
														</a>
													</li>
													<li>
														<a href="#">
															3rd Level
														</a>
													</li>
													<li>
														<a href="#">
															3rd Level
														</a>
													</li>
												</ul>
											</li>
										</ul>
									</li>
									<li>
										<a href="maps.html">
											<i class="fa fa-map-marker"></i>
											<span>Google Maps</span>
											<span class="label label-danger pull-right">Updated</span>
										</a>
									</li>
									<li>
										<a href="#" class="dropdown-toggle">
											<i class="fa fa-file-text-o"></i>
											<span>Extra pages</span>
											<i class="fa fa-chevron-circle-right drop-icon"></i>
										</a>
										<ul class="submenu">
											<li>
												<a href="faq.html">
													FAQ
												</a>
											</li>
											<li>
												<a href="emails.html">
													Email Templates
												</a>
											</li>
											<li>
												<a href="login.html">
													Login
												</a>
											</li>
											<li>
												<a href="login-full.html">
													Login Full
												</a>
											</li>
											<li>
												<a href="registration.html">
													Registration
												</a>
											</li>
											<li>
												<a href="registration-full.html">
													Registration Full
												</a>
											</li>
											<li>
												<a href="forgot-password.html">
													Forgot Password
												</a>
											</li>
											<li>
												<a href="forgot-password-full.html">
													Forgot Password Full
												</a>
											</li>
											<li>
												<a href="lock-screen.html">
													Lock Screen
												</a>
											</li>
											<li>
												<a href="lock-screen-full.html">
													Lock Screen Full
												</a>
											</li>
											<li>
												<a href="error-404.html">
													Error 404
												</a>
											</li>
											<li>
												<a href="error-404-v2.html">
													Error 404 Nested
												</a>
											</li>
											<li>
												<a href="error-500.html">
													Error 500
												</a>
											</li>
											<li>
												<a href="extra-grid.html">
													Grid
												</a>
											</li>
										</ul>
									</li>
								</ul>
							</div>
						</div>
					</section>
				</div>
				<div id="content-wrapper" class="email-inbox-wrapper">
					<div class="row">
						<div class="col-lg-12">
							
							<div id="email-box" class="clearfix">
								<div class="row">
									<div class="col-lg-12">
											
										<div id="email-header-mobile" class="visible-xs visible-sm clearfix">
											<div id="email-header-title-mobile" class="pull-left">
												<i class="fa fa-inbox"></i> Inbox
											</div>
											
											<a href="email-compose.html" class="btn btn-success email-compose-btn pull-right">
												<i class="fa fa-pencil-square-o"></i> Compose email
											</a>
										</div>
											
										<header id="email-header" class="clearfix">
											<div id="email-header-title" class="visible-md visible-lg">
												<i class="fa fa-inbox"></i> Inbox
											</div>
											
											<div id="email-header-tools">
												<div class="btn-group">
													<a href="email-inbox.html" class="btn btn-primary">
														<i class="fa fa-chevron-left"></i> Back to inbox
													</a>
												</div>
												
												<div class="btn-group">
													<button class="btn btn-primary" type="button" title="Refresh" data-toggle="tooltip" data-placement="bottom">
														<i class="fa fa-refresh"></i>
													</button>
													<button class="btn btn-primary" type="button" title="Spam" data-toggle="tooltip" data-placement="bottom">
														<i class="fa fa-exclamation-circle"></i>
													</button>
													<button class="btn btn-primary" type="button" title="Erase" data-toggle="tooltip" data-placement="bottom">
														<i class="fa fa-trash-o"></i>
													</button>
												</div>
												
												<div class="btn-group">
													<button data-toggle="dropdown" class="btn btn-primary dropdown-toggle has-tooltip" type="button" title="Labels">
														<i class="fa fa-tag"></i> <span class="caret"></span>
													</button>
													<ul class="dropdown-menu">
														<li><a href="#"><i class="fa fa-circle green"></i> Work</a></li>
														<li><a href="#"><i class="fa fa-circle red"></i> Home</a></li>
														<li><a href="#"><i class="fa fa-circle yellow"></i> Personal</a></li>
														<li><a href="#"><i class="fa fa-circle purple"></i> Documents</a></li>
													</ul>
												</div>
											</div>
											
											<div id="email-header-pagination" class="pull-right hidden-xs">
												<div class="btn-group pagination pull-right">
													<button class="btn btn-primary" type="button" title="Previous" data-toggle="tooltip" data-placement="bottom">
														<i class="fa fa-chevron-left"></i>
													</button>
													<button class="btn btn-primary" type="button" title="Next" data-toggle="tooltip" data-placement="bottom">
														<i class="fa fa-chevron-right"></i>
													</button>
												</div>
												
												<div class="num-items pull-right hidden-xs">
													1-50 from 5,912
												</div>
											</div>
											
										</header>
									</div>
								</div>
								
								<div class="row">
									<div class="col-lg-12">
										<div id="email-navigation" class="email-nav-nano hidden-xs hidden-sm">
											<div class="email-nav-nano-content">
												<a href="email-compose.html" class="btn btn-success email-compose-btn">
													<i class="fa fa-pencil-square-o"></i> Compose email
												</a>
												
												<ul id="email-nav-items" class="clearfix">
													<li class="active">
														<a href="email-inbox.html">
															<i class="fa fa-inbox"></i>
															Inbox 
															<span class="label label-primary pull-right">83</span>
														</a>
													</li>
													<li>
														<a href="#">
															<i class="fa fa-star"></i>
															Starred 
														</a>
													</li>
													<li>
														<a href="#">
															<i class="fa fa-pencil"></i>
															Drafts 
														</a>
													</li>
													<li>
														<a href="#">
															<i class="fa fa-envelope"></i>
															Sent 
															<span class="label label-default pull-right">11</span>
														</a>
													</li>
													<li>
														<a href="#">
															<i class="fa fa-trash-o"></i>
															Trash  
															<span class="label label-default pull-right">1,292</span>
														</a>
													</li>
												</ul>
												
												<div id="email-nav-labels-wrapper">
													<div class="email-nav-headline">
														Labels
													</div>
													<ul id="email-nav-labels" class="clearfix">
														<li>
															<a href="#">
																<i class="fa fa-circle emerald"></i>
																Important 
															</a>
														</li>
														<li>
															<a href="#">
																<i class="fa fa-circle red"></i>
																Home 
															</a>
														</li>
														<li>
															<a href="#">
																<i class="fa fa-circle green"></i>
																Work 
															</a>
														</li>
														<li>
															<a href="#">
																<i class="fa fa-circle yellow"></i>
																Personal 
															</a>
														</li>
														<li>
															<a href="#">
																<i class="fa fa-circle purple"></i>
																Documents 
															</a>
														</li>
													</ul>
												</div>
											</div>
											
										</div>
										<div id="email-detail" class="email-detail-nano">
											<div class="email-detail-nano-content">
												<div id="email-detail-inner">
													<div id="email-detail-subject" class="clearfix">
														<span class="subject">FW: Like your new movie</span>
														<span class="label label-success">Work</span>
													</div>
													
													<div id="email-detail-sender" class="clearfix">
														<div class="picture hidden-xs">
															<img src="img/samples/angelina-300.jpg" alt=""/>
														</div>
														
														<div class="users">
															<div class="from clearfix">
																<div class="name">
																	Angelina Jolie
																</div>
																<div class="email hidden-xs">
																	&lt;angelina@jolie.com&gt;
																</div>
															</div>
															
															<div class="to">
																To: <span>Me, Brad Pitt</span>
															</div>
														</div>
														
														<div class="tools">
															<div class="date">
																Sep 12 (6 days ago)
															</div>
															<div class="btns">
																<div class="btn-group">
																	<button class="btn btn-success" type="button">
																		<i class="fa fa-mail-reply"></i>
																	</button>
																	<button data-toggle="dropdown" class="btn btn-success dropdown-toggle" type="button">
																		<span class="caret"></span>
																	</button>
																	<ul class="dropdown-menu">
																		<li>
																			<a href="#">
																				<i class="fa fa-mail-reply"></i> Reply
																			</a>
																		</li>
																		<li>
																			<a href="#">
																				<i class="fa fa-mail-reply-all"></i> Reply all
																			</a>
																		</li>
																		<li>
																			<a href="#">
																				<i class="fa fa-mail-forward"></i> Forward
																			</a>
																		</li>
																		<li>
																			<a href="#">
																				<i class="fa fa-print"></i> Print
																			</a>
																		</li>
																	</ul>
																</div>
															</div>
														</div>
														
													</div>
													
													<div id="email-body">
														<p>
															Hey Scarlett,
														</p>
														<p>
															Well, the way they make shows is, they make one show. That show's called a pilot. Then they 
															show that show to the people who make shows, and on the strength of that one show they decide 
															if they're going to make more shows. <a href="#">Some pilots</a> get picked and become television 
															programs. Some don't, become nothing. She starred in one of the ones that became nothing. 
														</p>
														<p>
															Now that there is the Tec-9, a crappy spray gun from South Miami. This gun is advertised as 
															the most popular gun in American crime. Do you believe that shit? It actually says that in 
															the <a href="#">little book</a> that comes with it: the most popular gun in American crime. 
															Like they're actually proud of that shit.
														</p>
														<p>
															<b>You don't get sick!</b><br/>
															Your bones don't break, mine do. That's clear. Your cells react to bacteria and viruses 
															differently than mine. You don't get sick, I do. That's also clear. But for some reason, 
															you and I react the exact same way to water. We swallow it too fast, we choke. We get some 
															in our lungs, we drown. However unreal it may seem, we are connected, you and I. We're on 
															the same curve, just on opposite ends.
														</p>
														
													</div>
													
													<div id="email-detail-attachments">
														<div id="email-attachments-header" class="clearfix">
															<div class="headline">
																<i class="fa fa-paperclip"></i> <span>Attachments:</span> <b>3</b> - 
															</div>
															<div class="tools">
																<a href="#">Download all</a>
															</div>
														</div>
														
														<div id="email-attachments-content">
															<ul class="clearfix">
																<li>
																	<div class="img">
																		<a href="#">
																			<img src="img/samples/hdr/small/img_5.jpg" alt=""/>
																		</a>
																	</div>
																	<span class="name">
																		nature.jpg
																	</span>
																	<a href="#">Download</a>
																</li>
																<li>
																	<div class="img">
																		<a href="#">
																			<img src="img/samples/hdr/small/img_8.jpg" alt=""/>
																		</a>
																	</div>
																	<span class="name">
																		bratislava.jpg
																	</span>
																	<a href="#">Download</a>
																</li>
																<li>
																	<div class="img">
																		<i class="fa fa-file"></i>
																	</div>
																	<span class="name">
																		invoice.pdf
																	</span>
																	<a href="#">Download</a>
																</li>
															</ul>
														</div>
													</div>
													
												</div>
											</div>
										</div>
									</div>
								</div>
								
							</div>
							
						</div>
					</div>
					
					<footer id="footer-bar" class="row hidden-md hidden-lg">
						<p id="footer-copyright" class="col-xs-12">
							&copy; 2014 <a href="http://www.adbee.sk/" target="_blank">Adbee digital</a>. Powered by Centaurus Theme.
						</p>
					</footer>
				</div>
			</div>
		</div>
	</div>
	
	<div id="config-tool" class="closed">
		<a id="config-tool-cog">
			<i class="fa fa-cog"></i>
		</a>
		
		<div id="config-tool-options">
			<h4>Layout Options</h4>
			<ul>
				<li>
					<div class="checkbox-nice">
						<input type="checkbox" id="config-fixed-header" />
						<label for="config-fixed-header">
							Fixed Header
						</label>
					</div>
				</li>
				<li>
					<div class="checkbox-nice">
						<input type="checkbox" id="config-fixed-sidebar" />
						<label for="config-fixed-sidebar">
							Fixed Left Menu
						</label>
					</div>
				</li>
				<li>
					<div class="checkbox-nice">
						<input type="checkbox" id="config-fixed-footer" />
						<label for="config-fixed-footer">
							Fixed Footer
						</label>
					</div>
				</li>
				<li>
					<div class="checkbox-nice">
						<input type="checkbox" id="config-boxed-layout" />
						<label for="config-boxed-layout">
							Boxed Layout
						</label>
					</div>
				</li>
				<li>
					<div class="checkbox-nice">
						<input type="checkbox" id="config-rtl-layout" />
						<label for="config-rtl-layout">
							Right-to-Left
						</label>
					</div>
				</li>
			</ul>
			<br/>
			<h4>Skin Color</h4>
			<ul id="skin-colors" class="clearfix">
				<li>
					<a class="skin-changer" data-skin="" data-toggle="tooltip" title="Default" style="background-color: #34495e;">
					</a>
				</li>
				<li>
					<a class="skin-changer" data-skin="theme-white" data-toggle="tooltip" title="White/Green" style="background-color: #2ecc71;">
					</a>
				</li>
				<li>
					<a class="skin-changer blue-gradient" data-skin="theme-blue-gradient" data-toggle="tooltip" title="Gradient">
					</a>
				</li>
				<li>
					<a class="skin-changer" data-skin="theme-turquoise" data-toggle="tooltip" title="Green Sea" style="background-color: #1abc9c;">
					</a>
				</li>
				<li>
					<a class="skin-changer" data-skin="theme-amethyst" data-toggle="tooltip" title="Amethyst" style="background-color: #9b59b6;">
					</a>
				</li>
				<li>
					<a class="skin-changer" data-skin="theme-blue" data-toggle="tooltip" title="Blue" style="background-color: #2980b9;">
					</a>
				</li>
				<li>
					<a class="skin-changer" data-skin="theme-red" data-toggle="tooltip" title="Red" style="background-color: #e74c3c;">
					</a>
				</li>
				<li>
					<a class="skin-changer" data-skin="theme-whbl" data-toggle="tooltip" title="White/Blue" style="background-color: #3498db;">
					</a>
				</li>
			</ul>
		</div>
	</div>

	<!-- global scripts -->
	<script src="js/demo-skin-changer.js"></script> <!-- only for demo -->
	
	<script src="js/jquery.js"></script>
	<script src="js/bootstrap.js"></script>
	<script src="js/jquery.nanoscroller.min.js"></script>
	
	<script src="js/demo.js"></script> <!-- only for demo -->
	
	<!-- this page specific scripts -->
	
	<!-- theme scripts -->
	<script src="js/scripts.js"></script>
	<script src="js/pace.min.js"></script>
	
	<!-- this page specific inline scripts -->
	<script>
	$(document).ready(function() {
		$('#email-list li > .star > a').on('click', function() {
			$(this).toggleClass('starred');
		});
		
		$(".has-tooltip").each(function (index, el) {
			$(el).tooltip({
				placement: $(this).data("placement") || 'bottom'
			});
		});
		
		setHeightEmailContent();
		
		initEmailScroller();
	});
	
	$(window).smartresize(function(){
		setHeightEmailContent();
		
		initEmailScroller();
	});
	
	function setHeightEmailContent() {
		if ($( document ).width() >= 992) {
			var windowHeight = $(window).height();
			var staticContentH = $('#header-navbar').outerHeight() + $('#email-header').outerHeight();
			staticContentH += ($('#email-box').outerHeight() - $('#email-box').height());
	
			$('#email-detail').css('height', windowHeight - staticContentH);
		}
		else {
			$('#email-detail').css('height', '');
		}
	}
	
	function initEmailScroller() {
		if ($( document ).width() >= 992) {
			$('#email-navigation').nanoScroller({
		    	alwaysVisible: false,
		    	iOSNativeScrolling: false,
		    	preventPageScrolling: true,
		    	contentClass: 'email-nav-nano-content'
		    });
			
			$('#email-detail').nanoScroller({
		    	alwaysVisible: false,
		    	iOSNativeScrolling: false,
		    	preventPageScrolling: true,
		    	contentClass: 'email-detail-nano-content'
		    });
		}
	}
	</script>
</body>
</html>